<template>
  <vxe-grid
    ref="xTable"
    border
    resizable
    keep-source
    height="300px"
    :edit-rules="validRules"
    :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
    :columns="tableColumn"
    :data="dataSource"
  >
  </vxe-grid>
</template>
<script >
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'SalaryItemTable',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      tableColumn: [
        { type: 'seq', width: 60 },
        { field: 'salaryItem.itemName', title: '薪资项目' },
        { field: 'accountCycle', title: '核算方式', slots: { default: ({ row }) => {
          if (row.salaryItem) {
            return filterDictTextByCache('hr_account_cycle', row.salaryItem.accountCycle)
          } else {
            return ''
          }
        } }},
        { field: 'salaryTemplateDetail.lowerLimit', title: '金额下限' },
        { field: 'salaryTemplateDetail.upperLimit', title: '金额上限' },
        { field: 'amount', title: '执行金额/标准', editRender: { name: '$input', props: { type: 'number' }}},
        { field: 'salaryItem.remarks', title: '备注' }
      ],
      validRules: {
        amount: [
          { required: true, message: '请填写执行金额/标准' },
          { validator: this.amount }
        ]
      }
    }
  },
  methods: {
    amount({ cellValue, row }) {
      if (!row.salaryTemplateDetail) {
        return false
      }
      if (Number(cellValue) > row.salaryTemplateDetail.upperLimit) {
        return new Error('不能大于金额上限')
      }
      if (Number(cellValue) < row.salaryTemplateDetail.lowerLimit) {
        return new Error('不能低于金额下限')
      }
    },
    validate() {
      return this.$refs.xTable.validate()
    },
    getTableData() {
      return this.$refs.xTable.getTableData()
    }
  }
}
</script>
